<script>
import { mapState } from 'vuex'
import AOS from "aos"
import { correctPullDown } from '@/utils/global'
import ChangePage from '@/mixins/ChangePage.vue'
// 初始化动画
AOS.init();

export default {
  name: 'StudentSport',
  // 混入方法，公共方法previousPage，上滑至上一页
  mixins: [ ChangePage ],
  computed: {
    // 动态计算高度
    cssVar() {
      return {
        'height': document.documentElement.clientHeight + 'px'
      }
    },
    // 获取性别及年度账单数据
    ...mapState({
      gender: state => state.info.gender,
      annualData: state => state.annualData
    })
  },
  mounted () {
    // 每个页面都要有
    correctPullDown()
  },
  methods: {
    changePage() {
      this.$router.push({
        path: '/canteen/student'
      })
    }
  }
}
</script>

<template>
  <div v-swipeup="changePage" v-swipedown="previousPage">
    <!--  假设gender 1 为男 2 为女  -->
    <div :class="gender === '1' ? 'sport-boy' : 'sport-girl'" :style="cssVar" @click="changePage">
      <div class="student-con">
        <!--       这里是动画的效果，参考aos官网https://michalsnik.github.io/aos/ -->
        <div :data-aos="'fade-right'"
             data-aos-easing="ease-in-back"
             data-aos-delay="300"
             data-aos-offset="0"
             data-aos-duration="800"
             id="myText">
          <div v-if="annualData.data14 && annualData.data15 " class="mt-10">
            <div class="mt-10">
              <br/>
              <br/>
              <p>在努力学习之余</p>
              <p>也别忘了好好锻炼身体</p>
              <p>你预约体育场馆的次数是 <span class="data">{{ annualData.data14 }}</span> 次</p>
              <p>全校排名 <span class="data">{{ annualData.data15 }}</span> 名</p>
            </div>
            <br/>
            <div class="mt-10">
              <p>运动是青春的调味剂</p>
              <p>愿你的每一年</p>
              <p>都有健康的体魄和饱满的热情</p>
            </div>
          </div>
          <!--  兜底文案  -->
          <div v-else class="mt-10">
            <div class="mt-10">
              <br/>
              <div class="mt-10">
                <p>在努力学习之余</p>
                <p>也别忘了好好锻炼身体</p>
                <p>在过去的这段时光里</p>
                <p>你奔赴热爱的脚步从未停歇</p>
                <p>在众多热爱运动的师生中脱颖而出</p>
              </div>
              <br/>
              <div class="mt-10">
                <p>运动是生活的调味剂</p>
                <p>愿你的每一年</p>
                <p>都有健康的体魄和饱满的热情</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped>
.sport-girl{
  background: url("../../assets/images/sport/student_girl.jpg") no-repeat;
  background-size: 100% 100%;
}
.sport-boy{
  background: url("../../assets/images/sport/student_boy.jpg") no-repeat;
  background-size: 100% 100%;
}
.student-con{
  padding: 20px 5px;
}
p{
  color: #f1f5ff;
}
</style>
